<script>
  import { moment } from 'istrong-timeutil';
  import { get } from 'istrong-axiosmodel';
  import { orderBy } from 'lodash';
  import { vList } from 'istrong-mvue-common-ui';

  import renderChart from '../../libs/chart/rainChart';

  export default {
    name: 'rainChart',
    data() {
      return {
        id: '',
        name: '',
        address: '',
        interval: '1h',
        beginTime: moment(),
        endTime: moment(),
        chartData: { data: [] },
        listField: [
          {
            fieldLabel: '时间',
            fieldName: 'formatTime',
            fieldType: 'String',
            headerClass: 'chartViewer-RainList-Header-Time',
            contentClass: 'chartViewer-RainList-Content-Time'
          },
          {
            fieldLabel: '雨量(mm)',
            fieldName: 'val',
            fieldType: 'Number',
            fixed: 1,
            defaultLabel: '-',
            headerClass: 'chartViewer-RainList-Header-Val',
            contentClass: 'chartViewer-RainList-Content-Val'
          }
        ],
        listData: []
      }
    },
    components: {
      'vc-List': vList
    },
    methods: {
      init() {
        this.interval = '1h';
      },
      getChartData() {
        get('rain.details', {
          rainDetails: {
            _id: this.id,
            time: ['[', moment(this.beginTime).format('YYYY-MM-DDTHH:mm:00'), ',',
              moment(this.endTime).format('YYYY-MM-DDTHH:mm:00'), ']'].join(''),
            interval: this.interval
          }
        }).then(result => {
          result = result.data || result;
          let data = result.length > 0 ? result[0] : {
            data: []
          };
          let listData = [];
          let sum = 0;
          data.data.forEach(item => {
            item.formatTime = moment(item.time).format('MM-DD HH时');
            listData.push(item);
            sum += item.val || 0;
          });
          this.listData = orderBy(listData, ['time'], ['desc']);
          this.listData.push({ formatTime: '总量', val: sum });
          this.chartData = data;

          renderChart(this._chart, 'chartViewer-RainChart', data, this.interval, this.beginTime, this.endTime);
        });
      },
      changeRainInterval(e) {
        let attr = e.target.attributes;
        if (!attr.hasOwnProperty('data-type')) {
          return;
        }
        this.interval = attr.getNamedItem('data-type').value;
        this.getChartData();
      },
      routerToMap() {
        this.$router.push({
          name: 'rain/main',
          params: {
            id: this.id,
            showType: 'map'
          }
        });
      }
    },
    computed: {
      header_BeginTime: function () {
        return moment(this.beginTime).format('DD日HH时mm分');
      },
      header_EndTime: function () {
        return moment(this.endTime).format('DD日HH时mm分');
      }
    },
    mounted() {
    },
    created() {
    },
    beforeDestroy() {
    },
    beforeRouteEnter(to, from, next) {
      let { id, name, beginTime, endTime } = to.query;
      next(vm => {
        // 通过 `vm` 访问组件实例
        vm.id = id;
        vm.name = name;
        vm.beginTime = beginTime;
        vm.endTime = endTime;
        vm.init();
        vm.getChartData();
      });
    }
  }
</script>
<template>
  <div id="chartViewer">
    <div class="appHeader-listViewer">
      <div class="appHeader-listViewer-Time">{{header_BeginTime}} 至 {{header_EndTime}}</div>
      <div class="btChangeRouterMap" @click="routerToMap">
        <span class="ion-ios-location"></span>
      </div>
    </div>
    <div class="chartViewer-IntervalTab">
      <div v-bind:data-type="'1h'" v-on:click="changeRainInterval" :class="interval === '1h' ? 'chartViewer-IntervalTab-Checked' : ''"
        class="chartViewer-IntervalTabItem-Rain">1小时</div>
      <div v-bind:data-type="'3h'" v-on:click="changeRainInterval" :class="interval === '3h' ? 'chartViewer-IntervalTab-Checked' : ''"
        class="chartViewer-IntervalTabItem-Rain">3小时</div>
      <div v-bind:data-type="'6h'" v-on:click="changeRainInterval" :class="interval === '6h' ? 'chartViewer-IntervalTab-Checked' : ''"
        class="chartViewer-IntervalTabItem-Rain">6小时</div>
      <div v-bind:data-type="'12h'" v-on:click="changeRainInterval" :class="interval === '12h' ? 'chartViewer-IntervalTab-Checked' : ''"
        class="chartViewer-IntervalTabItem-Rain">12小时</div>
      <div v-bind:data-type="'24h'" v-on:click="changeRainInterval" :class="interval === '24h' ? 'chartViewer-IntervalTab-Checked' : ''"
        class="chartViewer-IntervalTabItem-Rain">24小时</div>
    </div>
    <div class="chartViewer-IntervalTabPage">
      <div class="chartViewer-Chart">
        <div class="chartViewer-Chart-Name">{{name}}</div>
        <div id="chartViewer-RainChart"></div>
      </div>
      <div class="div-hr"></div>
      <div class="chartViewer-List-Content">
        <vc-List :data="listData" :fields="listField" class="chartViewer-List"></vc-List>
      </div>
    </div>
  </div>
</template>
<style>
#chartViewer-RainChart{
  width: 100%;
  height: 210px;
}
.chartViewer-RainList-Header-Time,.chartViewer-RainList-Content-Time{
  text-align: left;
}
.chartViewer-RainList-Header-Val,.chartViewer-RainList-Content-Val{
  text-align: right;
}
.chartViewer-IntervalTabItem-Rain{
  min-width: 55px;
  text-align: center;
}
</style>